<div class="case-template-section">
    <h4 class="vpad10 text-primary">
        Tasks ({{$vm.template.tasks.length || 0}})
        <a class="pull-right" href ng-click="$vm.addTask()">
            <i class="fa fa-plus"></i>
        </a>
    </h4>

    <div class="empty-message" ng-if="!$vm.template.tasks || $vm.template.tasks.length === 0">
        No tasks have been specified. <a href class="mr-xxxs" ng-click="$vm.addTask()">Add a task</a>
    </div>

    <div ng-if="$vm.template.tasks.length !== 0" ui-sortable="$vm.sortableOptions" ng-model="$vm.template.tasks">
        <div class="task-item" ng-init="isCollapsed=true" ng-repeat="t in $vm.template.tasks">
            <div class="panel-heading">
                <span class="drag-handle text-primary clickable mr-xxs">
                    <i class="fa fa-bars"></i>
                </span>
                <span>
                    <a href ng-click="isCollapsed=!isCollapsed">
                        <i class="fa" ng-class="{'fa-caret-down': isCollapsed, 'fa-caret-up': !isCollapsed}"></i>
                    </a>
                </span>
                <span class="hpad5">[{{t.group || 'default'}}] {{t.title}}</span>
                <span class="mr-xxs" ng-if="t.owner">(Assigned to <em>{{$vm.getUserInfo.get(t.owner) | getField:'name'}}</em>)</span>

                <span class="pull-right">
                    <a class="text-default" href ng-click="$vm.editTask(t)">
                        <i class="fa fa-pencil"></i>&nbsp;Edit</a>
                    <span class="hpad5"></span>
                <a class="text-danger" href ng-click="$vm.removeTask(t)">
                    <i class="fa fa-trash"></i>&nbsp;Delete</a>
                </span>
            </div>
            <div class="panel-body" ng-hide="isCollapsed">
                <p marked="t.description" ng-show="t.description != ''"></p>
                <p class="text-warning" ng-show="!t.description || t.description===''">
                    <em>No description specified</em>
                </p>
            </div>
        </div>
    </div>

</div>
